<template>
  <div class="my">
    <div class="header" v-if="isLogin">
      <div class="header-top">
        <div class="header-l" @click="$router.push('userInfo1')">
          <img :src="userInfo.avatar" />
          <span>{{ userInfo.nickname }}</span>
        </div>
        <div class="header-r" @click="$router.push('userInfo1')">
          <input type="button" value="编辑资料" />
        </div>
      </div>
      <div class="header-footer">
        <div class="footer-l">
          <em>
            {{ publish_num }}
          </em>
          <span>头条</span>
        </div>
        <div class="footer-r">
          <em>{{ liked_num }}</em>
          <span>获赞</span>
        </div>
      </div>
    </div>

    <div class="header" v-else @click="$router.push('login1')">
      <div class="headerTop">
        <div class="headerL">
          <!-- <van-image round width="100" height="100" src="../assets/1.png" /> -->
          <img src="../assets/photo.png" />
         
        </div>
         <span>请点击登录</span>
      </div>
      <div class="header-footer">
        <div class="footer-l">
          <em> 0 </em>
          <span>头条</span>
        </div>
        <div class="footer-r">
          <em>0</em>
          <span>获赞</span>
        </div>
      </div>
    </div>

    <div class="main">
      <div class="m-top">
        <div @click="$router.push('favoritesList')">
          <a href="#"
            ><img src="../assets/xing2.png" alt="" /> <span> 收藏</span></a
          >
        </div>
        <div>
          <a href="#"
            ><img src="../assets/li.png" alt="" /> <span>历史</span></a
          >
        </div>
      </div>
      <van-cell-group class="m-footer">
        <van-cell title="我的发布" is-link  @click="$router.push('myRelease')"/>
        <van-cell
          title="修改密码"
          @click="$router.push('changePassword')"
          is-link
        />
        
        <van-cell title="联系我们" is-link />
        <van-cell title="关于我们" is-link />
        
      </van-cell-group>
    </div>
    <van-button
      v-if="isLogin"
      @click="logout"
      class="button"
      type="primary"
      block
      >退出登录</van-button
    >
    <!-- <van-button v-else class="button" type="primary" block>点击登录</van-button> -->

    <div class="footer"></div>
  </div>
</template>

<script>
import { Cell, CellGroup, Button, Dialog } from "vant";
import { mapMutations, mapState, mutations } from "vuex";

export default {
  data() {
    return {
      // userInfo: [],
   
    };
  },
  computed: {
    ...mapState(["userInfo", "isLogin", "publish_num", "liked_num"]),
  },
  components: {
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Button.name]: Button,
    [Dialog.Component.name]: Dialog.Component,
  },
  mounted() {
    // this.getuserInfo();
  },
  methods: {
    ...mapMutations(["clear"]),
    // getuserInfo() {
    //   let token = localStorage.getItem("tt-token");
    //   this.$http
    //     .post("/user/getuserInfo", {
    //       token,
    //     })
    //     .then((res) => {
    //       console.log(res.userInfo);
    //       if (res.code == 0) {
    //         this.userInfo = res.userInfo;
    //       }
    //     });
    // },
    async logout() {
      try {
        await this.$dialog.confirm({
          title: "退出",
          message: "确定要退出登陆吗",
        });
        localStorage.removeItem("token");
        localStorage.removeItem("uid");
        localStorage.removeItem("tokenExpired");
        this.clear();
      } catch (error) {}
    },
  },
};
</script>

<style lang="scss" scoped>
.my {
  background-color: rgb(245, 247, 249);
  height: 100vh;
}
.header {
  padding: 30px 20px 10px 20px;
  background: url(../assets/top.jpg);
  .headerL{
    img{
      width: 100px;
      height: 100px;
    }
  }
  .headerTop{
    text-align: center;
    span{
      color: #fff;
      font-size: 18px;
    }
  }
  .header-top {
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .header-l {
    align-items: center;
    display: flex;
    img {
      width: 80px;
      height: 80px;
      border-radius: 50%;
    }
    span {
      color: #fff;
      display: block;
      margin-left: 15px;
      font-size: 18px;
    }
  }
  input {
    border-radius: 10px;
    border: none;
  }
  .header-footer {
    display: flex;
    justify-content: space-around;
    text-align: center;
    em {
      display: block;
      font-style: normal;
      color: white;
      font-size: 18px;
    }
    span {
      display: block;
      color: white;
    }
  }
}
.main {
  .m-top {
    background-color: white;
    padding: 20px;
    line-height: 1.5;
    display: flex;
    justify-content: space-around;
    text-align: center;
    img {
      width: 15%;
    }
    span {
      display: block;
    }
    a {
      font-style: normal;
      color: black;
    }
  }
  .m-footer {
    margin-top: 10px;
  }
}
.footer {
  width: 100%;
  // height: 100%;
  background-color: rgb(245, 247, 249);
}
.button {
  margin-top: 10px;
  color: rgb(222, 134, 133);
  background-color: #fff;
  border: none;
}


// .van-hairline--top-bottom::after{
//     border-bottom: 1px solid #ccc;
// }
</style>